<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/listgoods'}">商品列表</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card">
        <el-row>
          <el-col :span="24"><div class="grid el-icon-warning">添加商品信息</div></el-col>
        </el-row>
        <el-steps :active="active - 0" finish-status="success" align-center  >
          <el-step title="基本信息"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品logo"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>

        <el-tabs tab-position="left"  v-model="active"
        @tab-click="ent" >
          <el-tab-pane label="基本信息" name="0">
              <label class="sp">商品名:</label>
              <el-input class="in" placeholder="商品名" v-model="goodsName"></el-input>
              <label class="sp">价格(元):</label>
              <el-input class="in" value="0" placeholder="价格,如:100.00" v-model="goodsPrice"></el-input>
              <label class="sp">重量(克):</label>
              <el-input class="in" value="0" placeholder="重量" v-model="goodsWeight"></el-input>
              <label class="sp">数量:</label>
              <el-input class="in" value="0" placeholder="数量" v-model="goodsNumber"></el-input>
              <label class="sp">商品分类</label>
              <el-cascader :options="omoList" :props="props1" clearable :show-all-levels="false"  v-model="pid" @change="getvalue"/>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="1">商品属性</el-tab-pane>
          <el-tab-pane label="商品logo" name="3">
             <div class="yh">
                      <el-upload
          class="avatar-uploader"
          :headers="headersCofing"
          action="https://lqshuige.top:9000/upload/image"
          :show-file-list="false"
          :limit="1"
            name="file"
          :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload"
         :data="{'folder': 'prd'}"
        > 
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
        </el-upload>
         </div>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name="4">
              <div class="aaa">
          <el-upload
          class="avatar-uploader"
          :headers="headersCofing"
          action="https://lqshuige.top:9000/upload/image"
          :show-file-list="true"
            list-type="picture-card"
            auto-upload="false"
          :on-success="handleAvatarSuccess1"
           :before-upload="beforeAvatarUpload1"
         :data="{'folder': 'prd'}"
          > 
          <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
        </el-upload>
         </div>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="5">商品内容<input type="text"  v-model="goodsDesc">  <button @click="add">添加</button></el-tab-pane>
        
        </el-tabs>
      </el-card>
  </div>
</template>

<script lang="ts" >
import { ref, reactive,computed,toRefs,onMounted,getCurrentInstance} from "vue";
// import { useRouter } from 'vue-router' `
import { ArrowDown } from "@element-plus/icons-vue";
import {
  Edit,
  Share,
  Delete,
  Search,
  Upload,
  Tools,
  Plus,
  ZoomIn, Download
} from "@element-plus/icons-vue";
// import { request } from "@/network/request";
import httpRequest from '../service';
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import type {
  UploadFile,
  ElUploadProgressEvent,
  ElFile,
} from "element-plus/es/components/upload/src/upload.type";
interface DataProps{
      active:number,
      ent:(tab:any)=>void,
      goodsName:string,
      imageUrl:string,
      headersCofing:any,
      dialogImageUrl :any,
      dialogVisible :boolean,
      disabled :boolean,
       handleAvatarSuccess:(res: ElUploadProgressEvent, file: UploadFile) =>void,
      beforeAvatarUpload :(file: ElFile) =>void,
      handleAvatarSuccess1:(res: ElUploadProgressEvent, file: UploadFile) =>void,
      beforeAvatarUpload1 :(file: ElFile) =>void,
      handleRemove:(file: UploadFile)=>void,
      handlePictureCardPreview :(file: UploadFile)=>void,
      handleDownload :(file: UploadFile)=>void,
      goodsPrice:string,
      goodsWeight:string,
      goodsNumber:string,
      goodsDesc:string,
      goodimgs:any,
      goodimg:any,
      add:()=>void,
      select:()=>void,
       omoList:[],
       pid:any,
       getvalue:()=>void,
       dynamicParam:any


}
export default {  
    name:'goodsadd1',
    setup(){
    const router = useRouter();
      const data:DataProps=reactive({
        active:0,
        goodsName:"龙茶",
        headersCofing:{"Authorization":window.sessionStorage.getItem("token")},
        imageUrl:'',
        dialogVisible:false,
        disabled:false,
        dialogImageUrl:'',
        goodsPrice:'100.00',
        goodsWeight:'12',
        goodsNumber:'11',
        goodsDesc:'111',
        goodimgs:[],
        goodimg:{},
         omoList:[],
         pid:0,
         dynamicParam:[],
         getvalue:()=>{
          let pid=data.pid
         httpRequest
    .request({
      url: '/attribute/findbycateidandsel',
      method: 'post',
      data:{
       catId: pid[pid.length-1],
       attrSel: 2
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      var data1=res.data

     
      for(var i=0;i<data1.length;i++){  
        var listss:any={}
        listss.attrName=data1[i].attrName
        listss.attrValue=data1[i].attrVals
        listss.catId=data1[i].catId
        data.dynamicParam.push(listss)
      }
      // console.log(list);
      console.log(data.dynamicParam)
       
      
    })

    },
        add:()=>{

      //  console.log(data.pid)
        let pid=data.pid
        // console.log(data.dynamicParam)
        var dynamicParam=data.dynamicParam
        var ss:any[]=[]
          for(var i=0;i<dynamicParam.length;i++){ 
              ss.push(dynamicParam[i])
          }
          // console.log(pid.join('_'))
          // console.log(ss)
             httpRequest
  .request({
    url: '/goods/addgoods',
    method: 'post',
    data:{
      attrs: [],
      dynamicParam:ss,
      goodsCate: pid.join("_"),
      goodsDesc: data.goodsDesc,
      goodsName: data.goodsName,
      goodsNumber:data.goodsNumber,
      goodsPrice: data.goodsPrice,
      goodsSmallLogo: data.goodimg,
      goodsWeight: data.goodsWeight,
      pics:data.goodimgs,
      staticAttr: []
    },
    interceptors: {
      requestInterceptor: (config) => {
        console.log(config)
        return config
      }
    }
  })
  .then((res:any) => {
    console.log(res);
    if(res.code===200){
       router.push('/listgoods')
    }else{
      console.log('添加失败')
    }
    
  })  
        },
          select:()=>{
  httpRequest
  .request({
    url: '/goodscategory/gethaschildren',
    method: 'post',
    data:{
      cateName:'',
      pageNo:1,
      pageSize:35
    },
    interceptors: {
      requestInterceptor: (config) => {
        console.log(config)
        return config
      }
    }
  })
  .then((res:any) => {
    // data.count=res.data.count
    // data.count=res.data.count
    let {rows}=res.data
    data.omoList=rows   
    // console.log(rows);
    // return
    for(let i=0;i<rows.length;i++){
         rows[i].label=rows[i].cateName
        rows[i].value=rows[i].id
         for(let j=0;j<rows[i].children.length;j++){
              rows[i].children[j].label=rows[i].children[j].cateName
             rows[i].children[j].value=rows[i].children[j].id    
               for(let z=0;z<rows[i].children[j].children.length;z++){
                     rows[i].children[j].children[z].label=rows[i].children[j].children[z].cateName
                     rows[i].children[j].children[z].value=rows[i].children[j].children[z].id
               }
         }
      console.log(rows[i]);
       }
      
  
  })
    },
        handleRemove :(file: UploadFile) => {
            console.log(file.url)
        },
        handlePictureCardPreview :(file: UploadFile) => {
          data.dialogImageUrl = 'https://lqshuige.top:9000/images/upload/tp.jpg'
          data.dialogVisible= true
        },
        handleDownload : (file: UploadFile) => {
          console.log(file)
        },
        handleAvatarSuccess:(res: any, file: UploadFile)=>{
            data.imageUrl = URL.createObjectURL(file.raw)
             data.goodimg=res.data
            // data.imgurls="upload_b967f60e5107654c9d9d2d2016e2d6d5.jpg"
       },
        beforeAvatarUpload :(file: ElFile) =>{
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
              ElMessage.error('Avatar picture must be JPG format!')
            }
            if (!isLt2M) {
              ElMessage.error('Avatar picture size can not exceed 2MB!')
            }
            return isJPG && isLt2M
        },
          handleAvatarSuccess1:(res: any, file: UploadFile)=>{
            data.dialogImageUrl = URL.createObjectURL(file.raw)
            data.dialogImageUrl=''
            // data.imgurls=res.data.path
            // data.imgurls="upload_b967f60e5107654c9d9d2d2016e2d6d5.jpg"
            console.log(res.data)
            data.goodimgs.push(res.data)

       },
        beforeAvatarUpload1 :(file: ElFile) =>{
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
              ElMessage.error('Avatar picture must be JPG format!')
            }
            if (!isLt2M) {
              ElMessage.error('Avatar picture size can not exceed 2MB!')
            }
            return isJPG && isLt2M
        },
        ent:(tab:any)=>{
         if(tab.name==0){
            console.log(1);
            
          }
        }
        

      })
      onMounted(()=> {
  data.select()
})
     const refData=toRefs(data)
     return{
        ...refData,
         Plus, ZoomIn, Download, Delete
    }
 }
}
</script>

<style lang="less" scoped>   
.el-upload-list__item-actions{
  font-size: 18px;

}
  .el-steps{
    margin-top:10px;
  } 
  .box-card {
    margin:20px 0px;
    width: 100%;
    font-size: 14px;
  }
  .el-col{
    background-color: #f4f4f5;
    color: #909399;
  }
  .grid{
  height:40px;
  line-height: 40px;
  }
  .sp{
    float: left;
    margin:15px;
    width: 100%;
    display: block;
    text-align: left;
  }
  .el-select{
    float: left;
  }
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .yh{
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 200px;
    height: 200px;
  }
</style>
